/*swiper轮播图*/
var mySwiper = new Swiper ('.swiper-container', {
  direction: 'horizontal', // 垂直切换选项
  loop: false, // 循环模式选项
  autoplay:true,//自动切换
  // 如果需要分页器
  // pagination: {
  //   el: '.swiper-pagination',
  // },
  // 如果需要前进后退按钮
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  // 如果需要滚动条
  // scrollbar: {
  //   el: '.swiper-scrollbar',
  // },
})
//首页搜索框
//主要是对 人们城市和 预定按钮进行处理
let cityInput = document.querySelector(".nav .navbox >.reservebox li:nth-child(1) input");
let reserveBtn = document.querySelector(".nav .navbox >.reservebox li:nth-child(5) a");
let remindCity = document.querySelector(".nav .navbox >.remind");
//先获取城市列表ul后面添动态加li，拼接li的值
let cityUl = document.querySelector(".nav .navbox >.remind ul");
//console.log(cityInput,reserveBtn,remindCity);
//监听用户输入城市的时候显示城市提示框
let flag = false;
let fn_fcs = function () {
  remindCity.style.display = "block";
};
//判断点击的是不是a标签，如果是，里面内容赋给城市输入框的value ,先清空，后赋值,改flag状态
let fn_clk = function (e){
  let res = e.target.tagName.toLowerCase();
  if (res === "a"){
    cityInput.value = "";
    cityInput.value = e.target.innerText;
    //console.log(cityInput.value);
    flag = true ;
  }
};
cityInput.onfocus = fn_fcs;
remindCity.onclick = fn_clk;
//用户勾选热门城市后 鼠标移除 渲染城市input框的value，并且自身消失
remindCity.onmousemove = function () {
  //判断用户勾选热门城市，勾选后提示框消失
  if (flag && cityInput.value){
    remindCity.style.display = "none";
  }
}
//提交前确认用户最终输入的value值
reserveBtn.onclick = function () {
  //用户输入的过后cityInput.value是输入的值，携带数据访问搜索页面
  if (cityInput.value){
    reserveBtn.href = `./html/search.html?d_name=${cityInput.value}`;
  }else {
  //未输入的时候remindCity.value是undefined，并且不携带数据访问搜索页面
    reserveBtn.href = `./html/search.html`
    //remindCity.style.display = "block"
  }
}

/* 首页加载热门城市和热门故事数据*/   
//promise封装ajax请求
//获取渲染页面的节点
//依次获取首页热门城市 图片标签，地址标签，和图片描述标签， a标签链接
  let hcityImgArr = document.querySelectorAll(".room .roomlist img");
  let hcityFispArr = document.querySelectorAll(".room .roomlist div span:nth-child(1)");
  let hcityLaspArr = document.querySelectorAll(".room .roomlist div span:nth-child(2)");
  let hcityLinkArr = document.querySelectorAll(".room .roomlist a");
//依次获取首页热门故事 图片标签，标题标签，文本标签，查看详情链接标签 
  let hstoryImgArr = document.querySelectorAll(".story .swiper-container .sw-img a");
  let hstoryTitArr = document.querySelectorAll(".story .swiper-container .sw-text h3");
  let hstoryTextArr = document.querySelectorAll(".story .swiper-container .sw-text p");
  let hstoryLinkArr = document.querySelectorAll(".story .swiper-container .sw-text a");
//promise封装ajax请求
  let getIndex = function (url){
    return new Promise(
      function (resolve,reject){
      let xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function (){
      if(xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 300){
          let result = JSON.parse(xhr.responseText);
          // console.log(result);
            resolve(result);
        }else {
          reject(new Error("Request was unsuccessful: ") + xhr.status);
        }
      }
    }
      xhr.open("GET",url,true);
      xhr.send();
    }
        );
      }
//页面加载时,渲染数据
    document.body.onload = function (){
//拿到地区名后渲染到提示框
    getIndex("/admin/cityname").then((result)=>{
      let str = ""
//循环拼接str 再赋值给li
      let len = result.data.length
      for (let i=0;i<len;i++) {
        str+=`<li><a href="javascript:void(0)">${result.data[i].d_name}</a></li>`
      }
      cityUl.innerHTML = str
    });
//拿到热门城市数据后渲染到相关标签链接等
    getIndex("/admin/hcity").then((result)=>{
      //console.log(result)
      for (let i=0;i<4;i++){
        //console.log(result.data[i].d_number)
        hcityImgArr[i].src = `./img/${result.data[i].d_pic}`;
        hcityLinkArr[i]. href = `./html/search.html?d_name=${result.data[i].d_name}`;
        hcityFispArr[i].innerHTML = `${result.data[i].d_name}`;
        hcityLaspArr[i].innerHTML = `${result.data[i].d_ptit}`;
      }
    });
//拿到故事数据后渲染到相关标签链接等
    getIndex("/admin/hstory").then((result)=>{
      //console.log(result)
      for (let i=0;i<4;i++){
        //console.log(hstoryLinkArr[i].href);
        hstoryImgArr[i].style.backgroundImage = `url("./img/${result.data[i].s_pic}")`;
        hstoryImgArr[i].href = `./html/storylist.html?s_id=${result.data[i].s_id}`;
        hstoryLinkArr[i].href = `./html/storylist.html?s_id=${result.data[i].s_id}`;
        hstoryTitArr[i].innerHTML = `${result.data[i].s_tit}`;
        hstoryTextArr[i].innerHTML = `${result.data[i].s_text}`;
      }
    });
    };